<template>
  <div>
    <div class="d-flex machine-data--title flex-row justify-content-center" ref="titlescrollTop"
      :style="{ border: '1px solid ' + item.color, backgroundColor: item.color }"
      v-if="item.name && Object.keys(data).length > 0">{{ item.name }}</div>
    <div class="d-flex machine_data-items" :class="`item${index}`">
      <div class="d-flex machine_data-item" v-for="(value, name, index) in data" :key="index">
        <div class="
                d-flex
                machine_data-item-top
                align-items-center
                justify-content-center
              ">
          {{ value }}
        </div>
        <div class="
                d-flex
                machine_data-item-bottom
                align-items-center
                justify-content-center
              ">
          {{ name }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang='ts'>
const props = defineProps({
  data: {
    type: Object,
    default: []
  },
  item: {
    type: Object,
    default: {}
  },
  index: {
    type: Number,
    default: 1
  }
})
const { data,item,index } = toRefs(props)
onUnmounted(()=>{
  console.log('unmout')
  console.log(item.value,data.value,index.value)
})
</script>
<style lang='scss' scoped>
.machine-data--title {
  color: #ffffff;
  border: 1px solid #ffffff;
  margin: .5%;
  padding: .5% 0;
}

.machine_data-items {
  flex-wrap: wrap;
}

.item1>.machine_data-item {
  border: 1px solid #0c86e9;
}

.item2>.machine_data-item {
  border: 1px solid #6495ED;
}

.item3>.machine_data-item {
  border: 1px solid #9932CC;
}

.item4>.machine_data-item {
  border: 1px solid #FFB6C1;
}

.item5>.machine_data-item {
  border: 1px solid #32CD32;
}


.item1>.machine_data-item>.machine_data-item-bottom {
  border-top: 1px solid #0c86e9;
}

.item2>.machine_data-item>.machine_data-item-bottom {
  border-top: 1px solid #6495ED;
}

.item3>.machine_data-item>.machine_data-item-bottom {
  border-top: 1px solid #9932CC;
}

.item4>.machine_data-item>.machine_data-item-bottom {
  border-top: 1px solid #FFB6C1;
}

.item5>.machine_data-item>.machine_data-item-bottom {
  border-top: 1px solid #32CD32;
}


.machine_data-item {
  margin: .5%;
  flex-direction: column;
  width: 15%;
  border: 1px solid #ffffff;
  color: #ffffff;
}

.machine_data-item-top {
  width: 100%;
  font-weight: bold;
  flex: auto;
  word-break: break-all;
  overflow: hidden;
  text-align: center;
  display: -webkit-box !important;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.machine_data-item-bottom {
  border-top: 1px solid #ffffff;
  width: 100%;
  word-break: break-all;
  overflow: hidden;
  display: -webkit-box !important;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  flex: none;
  text-align: center;
}

.machine_data-item-top,
.machine_data-item-bottom {
  padding: 0.5rem;
}
</style>